<template>
  <div>
    <el-button type="primary" @click="showDialog">编辑商品属性</el-button>

    <el-dialog
      :visible.sync="dialog"
      :append-to-body="true"
      title="编辑商品属性"
    >
      <el-form :model="currentForm" ref="form" label-width="150px">
        <el-form-item label="中文品名">
          <el-input v-model="currentForm.goodsNameZh" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Goods Name">
          <el-input v-model="currentForm.goodsName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货值（美元）">
          <el-input-number
            v-model="currentForm.goodsValue"
            autocomplete="off"
            :precision="2"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="箱装数">
          <el-input-number
            v-model="currentForm.goodsNumInBox"
            autocomplete="off"
            :precision="0"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          :label="$t('table.整箱重量')"
          prop="weight"
        >
          <el-input-number
            v-model="currentForm.weight"
            :controls="false"
            :min="0"
            :max="max"
            :precision="3"
            class="weight-input"
          >
          </el-input-number>
          <span class="mgl10">kg</span>

        </el-form-item>
        <el-form-item
          :label="$t('table.整箱尺寸')"
        >
          <div class="size-input-box">
            <el-form-item prop="length">
              <el-input-number
                v-model="currentForm.length"
                class="size-input"
                :min="0"
                :max="max"
                :precision="0"
                :controls="false"
              >
              </el-input-number>
              <span class="mgl10 mgr20">{{ $t('stock.长(cm)') }}</span>
            </el-form-item>

            <el-form-item prop="width">
              <el-input-number
                v-model="currentForm.width"
                class="size-input"
                :min="0"
                :max="max"
                :precision="0"
                :controls="false"
              >
              </el-input-number>
              <span class="mgl10 mgr20">{{ $t('stock.宽(cm)') }}</span>
            </el-form-item>

            <el-form-item prop="height">
              <el-input-number
                v-model="currentForm.height"
                class="size-input"
                :min="0"
                :max="max"
                :precision="0"
                :controls="false"
              >
              </el-input-number>
              <span class="mgl10">{{ $t('stock.高(cm)') }}</span>
            </el-form-item>

          </div>
          <div class="tips" style="margin-top: -10px">按箱装数装满当前商品的箱子重量和尺寸</div>
        </el-form-item>
        <el-form-item label="材质（中英文）">
          <el-input v-model="currentForm.material" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用途（中英文）">
          <el-input v-model="currentForm.application" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="currentForm.brand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-radio-group v-model="currentForm.goodsType">
            <el-radio
              v-for="item in allGoodsType"
              :key="item"
              :label="item"
            >
              {{item}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品属性">
          <el-checkbox-group v-model="currentForm.goodsAttr">
            <el-checkbox
              v-for="item in allGoodsAttr"
              :key="item"
              :label="item"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="包装服务">
          <el-select v-model="currentForm.packageMaterialId">
            <el-option
              v-for="(item, index) in packageMaterialList"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否需组装">
          <el-switch
            v-model="currentForm.isCombination"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitGoodsAttr">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import goodsOptionsMixin from "@/views/stock/mixin/goodsOptionsMixin";

export default {
  name: 'EditGoodsAttr',
  mixins: [goodsOptionsMixin],
  props: {
    goods: {
      type: Object,
    },
    packageMaterial: {
      type: Array,
    },
  },
  computed: {
    // 包装服务
    packageMaterialList(){
      const arr = [
        {label: this.$t('table.No packaging service'), value: 0},
      ]
      return arr.concat(this.packageMaterial.map(item=>{
        return {
          value: item.id,
          label: item.name + '(' + item.price + this.$t('table.unit1') + ')',
        }
      }))
    }
  },
  data(){
    return {
      currentForm: {
        id: 0,
        goodsNameZh: '',
        goodsName: '',
        goodsValue: 0,
        goodsNumInBox: 0,
        material: '', // 材质
        application: '', // 用途
        brand: '', // 品牌
        packageMaterialId: 0, // 包装服务
        isCombination: false, // 是否需要组装
        weight: 0,
        length: 0,
        width: 0,
        height: 0,
        goodsType: '',
        goodsAttr: [],
      },
      dialog: false,
      formLoading: false,
      max: 999999,
    }
  },
  created() {
    // console.log(this.allGoodsType)
  },
  methods: {
    showDialog(){

      // 重新赋值
      this.currentForm.id = this.goods.id
      this.currentForm.goodsNameZh = this.goods.goodsAttr ? this.goods.goodsAttr.goodsNameZh : ''
      this.currentForm.goodsName = this.goods.goodsAttr ? this.goods.goodsAttr.goodsName : ''
      this.currentForm.goodsValue = this.goods.goodsValue
      this.currentForm.goodsNumInBox = this.goods.goodsNumInBox
      this.currentForm.material = this.goods.goodsAttr ? this.goods.goodsAttr.material : ''
      this.currentForm.application = this.goods.goodsAttr ? this.goods.goodsAttr.application : ''
      this.currentForm.brand = this.goods.goodsAttr ? this.goods.goodsAttr.brand : ''
      this.currentForm.packageMaterialId = this.goods.packageMaterialId
      this.currentForm.isCombination = this.goods.isCombination
      this.currentForm.weight = this.goods.goodsAttr?.boxInfo?.weight ? this.goods.goodsAttr.boxInfo.weight : 0
      this.currentForm.length = this.goods.goodsAttr?.boxInfo?.length ? this.goods.goodsAttr.boxInfo.length : 0
      this.currentForm.width = this.goods.goodsAttr?.boxInfo?.width ? this.goods.goodsAttr.boxInfo.width : 0
      this.currentForm.height = this.goods.goodsAttr?.boxInfo?.height ? this.goods.goodsAttr.boxInfo.height : 0
      this.currentForm.goodsType = this.goods.goodsAttr?.goodsType ? this.goods.goodsAttr.goodsType : ''
      this.currentForm.goodsAttr = this.goods.goodsAttr?.goodsAttr ? this.goods.goodsAttr.goodsAttr : []

      this.dialog = true
    },
    // 保存商品属性
    submitGoodsAttr(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.formLoading = true;
          request({
            url: '/stock/saveGoodsAttr',
            data: this.currentForm,
            method: 'put',
            handleError: true,
          })
            .then(res=>{
              this.formLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.$emit('changeGoods') // 改变了商品属性
                this.dialog = false
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.size-input-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .size-input{
    width: 100px;
    ::v-deep .el-input-group__append{
      padding: 0 15px !important;
    }
  }
}
</style>
